<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>06_插入和替换元素操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 插入和替换元素操作：针对元素增删改操作
		    增：
		     oppend()-------------功能：在匹配元素集合中所有元素的 内部末尾 插入内容
			 prepend()------------功能：在匹配元素集合中所有元素的 内部开头 插入内容
			 
			 after()--------------功能：在匹配元素集合中所有元素的 外部后面 插入内容
			 before()-------------功能：在匹配元素集合中所有元素的 外部前面 插入内容
			 
			删：
			 remove()-------------功能：移除匹配元素集合中所有的元素和子元素【盒子模型都删掉】
			 empty()--------------功能：清空匹配元素集合中所有的元素的内容【盒子模型不删掉】
			 
			改:
			 replaceWith()--------
		 -->
		<style>
			body{
				margin: 20px;
			}
			button{
				margin: 5px;
				padding: 10px 15px;
				cursor: pointer;
			}
			div#target{
				border: 1px solid #a2eaff;
				padding: 10px;
				margin-top: 10px;
				border-radius: 5px;
			}
			.afterBtn{
				display: block;
				width: 300px;
				height: 300px;
				border-radius: 50%;
				background-image: url(../img/mhls.png);
				background-color: #dcffd2;
				background-size: 100% 100%;
				color: transparent;
			}
		</style>
	</head>
	<body>
		<button id="appendBtn">内部末尾插入元素</button>
		<button id="prependBtn">内部开头插入元素</button>
		<button id="afterBtn">外部后面插入元素</button>
		<button id="beforeBtn">外部前面插入元素</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replaceWithBtn">替换元素</button>
		<div id="target">
			<p>目标元素的初始段落</p>
		</div>
		<div id="newElement" style="display: none;">
			<p>插入新元素的初始段落</p>
		</div>
		
		<script>
			//点击：内部末尾插入元素 按钮 文本后面 追加新元素中包含内容操作
			$("#appendBtn").click(function(){
				//追加新元素--自带内容
				//1.追加效果是新元素---克隆---html结构全部复制出来，元素包含属性
				//clone():创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
				var cpe=$("#newElement").clone();
				//2.自带的属性和属性值：隐藏-->显示
				cpe.css("display","block");
				$("#target").append(cpe);
			});
			
			$("#prependBtn").click(function(){
				var cpe=$("#newElement").clone();
				cpe.css("display","block");
				$("#target").prepend(cpe);
			});
			
			$("#afterBtn").click(function(){
				var cpe=$("#newElement").clone();
				cpe.addClass("afterBtn");
				$("#target").after(cpe);
			});
			
			$("#beforeBtn").click(function(){
				$("#newElement p").css("display","none");
				var cpe=$("#newElement").clone();
				cpe.css({"display":"block",
				         "width":"300px",
						 "height":"300px",
						 "border-radius":"50%",
						 "background-image":"url(../img/mhls.png)",
						 "background-color":"#dcffd2",
						 "background-size":"100% 100%"
				});
				$("#target").before(cpe);
			});
			
			//5.点击 删除元素 按钮   页面上所有元素包括子元素全部删掉【盒子模型】
			$("#removeBtn").click(function(){
				$("#target").remove();
			});
			
			//6.点击 清空元素 按钮   页面上所有元素中内容全部删掉【盒子模型不删】
			$("#emptyBtn").click(function(){
				$("#target").empty();
			});
			
			//7.点击 替换元素 按钮   页面上目标元素替换为新元素
			$("#replaceWithBtn").click(function(){
				var ne=$("#newElement").clone().css("display","block");
				$("#target").replaceWith(ne);
			});
		</script>
	</body>
</html>